<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="addLeader()">给学校添加校长</button>
    <h3>{{ name }}</h3>
    <h3>{{ address }}</h3>
    <h3 v-if="leader">{{ leader }}</h3>
    <hr>
    <button @click="addSex()">给学生添加性别</button>
    <h3>学生姓名: {{ student.name }}</h3>
    <h3>学生年龄: {{ student.age.sAge }} </h3>
    <h3 v-if="student.sex">学生性别: {{ student.sex }}</h3>
    <h3>朋友</h3>
    <ul>
        <li v-for="(friend, index) in student.friends" :key="index">
            {{ index + 1 }}: {{ friend.name }} {{ friend.age}}
        </li>
    </ul>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            name: '尚硅谷',
            address: '北京',
            student: {
                name: 'Tom',
                age: {
                    rAge: 40,
                    sAge: 29,
                },
                friends: [{
                    name: 'Jerry',
                    age: 35,
                }, {
                    name: 'Tony',
                    age: 38,
                }]
            }
        },

        methods: {
            addSex() {
                // 两种方式给 data 里面的对象添加响应式的数据
                // Vue.set(vm.student, 'sex', '男')
                this.$set(this.student, 'sex', '男')
            },

            addLeader() {
                // VM 和 VM 的根 data 都不能作为 target
                Vue.set(this._data, 'leader', '小张') // 添加失败
                this.$set(this, 'leader', '小张') // 添加失败
            },
        }
    })
</script>
</body>
</html>